import React, {Component} from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import CircularProgress from 'material-ui/CircularProgress';
import Divider from 'material-ui/Divider';
import Snackbar from 'material-ui/Snackbar';
import Wrapper from '../Welcome/Wrapper';
import BOXSTYLE from './BOXSTYLE';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../../redux/actions/RegisterAc';
import { errorHandle } from '../Utils/ErrorHandle';

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: null,
      password: null,
      verification_code: null,
      countdown: 90
    }
  }

  tick() {
    if (this.props.isGetCode) {
      this.setState((prevState) => ({
        countdown: prevState.countdown - 1
      }));
    } else {
      this.setState({
        countdown: 90
      });
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  sendCode() {
    this.props.actions.sendCode(this.state.phone);
  }

  register() {
    this.props.actions.register(this.state.phone, this.state.password, this.state.verification_code);
  }

  changeLabel() {
    if (this.props.isGetCoding) {
      return '正在发送 ...';
    } else if (this.props.isGetCode){
      return this.state.countdown + '秒后重新获取';
    } else {
      return '获取验证码';
    }
  }

  handleRequestCloseSnackbar() {
    this.props.actions.clearError();
  }

  render() {
  	return (
      <Wrapper>
        <Paper style={BOXSTYLE.box}>
          <TextField
            fullWidth={true}
            hintText="手机号码"
            hintStyle={BOXSTYLE.hintStyle}
            underlineShow={false}
            onChange={(e, v) => this.setState({phone: v})}
            errorText={errorHandle(this.props.error, 'phone')}
            errorStyle={BOXSTYLE.errorStyle}
          />
          <Divider />
          <TextField
            fullWidth={true}
            hintText="密码"
            hintStyle={BOXSTYLE.hintStyle}
            underlineShow={false}
            type="password"
            onChange={(e, v) => this.setState({password: v})}
            errorText={errorHandle(this.props.error, 'password')}
            errorStyle={BOXSTYLE.errorStyle}
          />
          <Divider />
          <TextField
            fullWidth={true}
            hintText="短信验证码"
            hintStyle={{color: '#fff'}}
            underlineShow={false}
            onChange={(e, v) => this.setState({verification_code: v})}
            errorText={errorHandle(this.props.error, 'verification_code')}
            errorStyle={BOXSTYLE.errorStyle}
          />
          <FlatButton 
            style={{marginTop: 8, width: '100%'}}
            label={this.changeLabel()}
            disabled={this.props.isGetCode}
            primary={true} 
            onClick={this.sendCode.bind(this)}
          />
        </Paper>
        <RaisedButton 
          style={BOXSTYLE.btn}
          fullWidth={true}
          label={this.props.isRegistering ? '' : '注册'} 
          primary={true} 
          onClick={this.register.bind(this)}
          children={this.props.isRegistering 
            ? <CircularProgress 
              style={{margin: 6}} 
              size={24} 
              color="#fff"/> 
            : ''
          }
        />
        <Link to={'/login'}>
          <FlatButton 
            style={{width: '100%'}}
            label="已有账号？立即登录" 
            primary={true} 
          />
        </Link>
        <Snackbar
          open={this.props.openSnackbar}
          message={this.props.statusText || ''}
          autoHideDuration={4000}
          onRequestClose={this.handleRequestCloseSnackbar.bind(this)}
        />
      </Wrapper>
  	);
  }
};

const mapStateToProps = (state) => ({
  isRegistering: state.register.isRegistering,
  isRegister: state.register.isRegister,
  isGetCoding: state.register.isGetCoding,
  isGetCode: state.register.isGetCode,
  statusText: state.register.statusText,
  openSnackbar: state.register.openSnackbar,
  error: state.register.error
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actionCreators, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Register);
